<template>
  <div>
    <!--布局容器-->
    <el-container style="height: 100%; min-height: 100vh">
      <!--顶部栏-->
      <el-header class="headclass">
        <div>
          <img src="../assets/images/logo.png" @click="tohome">
        </div>
        <div class="weather">
          <div class="ee" v-if="role != 'admin'">
            <router-link to="/notice-user/list">
              <el-badge :value="12" class="item">
                <i class="el-icon-bell"></i>
              </el-badge>
            </router-link>
          </div>
          <!-- <div class="ee">
            <router-link to="/audit">
              <el-badge :value="12" class="item">
                <i class="el-icon-s-flag"></i>
              </el-badge>
            </router-link>
          </div>
          <div class="ee">
            <el-badge :value="12" class="item">
              <i class="el-icon-s-promotion"></i>
            </el-badge>
          </div> -->
        </div>
        <div class="user">
          <el-dropdown size="small" split-button type="primary" @click="userInfo">
            <i class="el-icon-user-solid"></i>
            {{ name || '用户名' }}
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="exit">
                <span>退出</span>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/user-center/info">
                  <span>个人中心</span>
                </router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <!--左侧侧边栏-->
        <el-aside :width="isCollapsed ? '64px' : '220px'">
          <!-- <div class="toggle-button" @click="toggleCollapse">|||</div> -->
          <!--侧边栏菜单区域 :router="true" 为侧边栏开启路由模式-->
          <el-menu background-color="#FFFFFF" text-color="#000000" active-text-color="#0D7DEB" :unique-opened="true" :collapse="isCollapsed" :collapse-transition="false" :router="true" :default-active="$route.path">
            <el-menu-item index="/homepage">
              <template slot="title">
                <!--图标-->
                <i class="el-icon-s-home"></i>
                <!--文本-->
                <span>首页</span>
              </template>
            </el-menu-item>
            <!-- 流程管理 -->
            <el-submenu index="process-management" v-if="isShow(['admin', 'user'])">
              <template slot="title">
                <i class="el-icon-circle-plus"></i>
                <span>流程管理</span>
              </template>
              <el-menu-item index="/process-management/process-list">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>新建流程</span>
                </template>
              </el-menu-item>

              <!-- 实施方案 -->
              <el-submenu index="implement-scheme">
                <template slot="title">
                  <i class="el-icon-folder"></i>
                  <span>实施方案</span>
                </template>
                <el-menu-item index="/implement-sponsor">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>我的发起</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/audit">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>我的待办</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/implement-process-status">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>流程进度</span>
                  </template>
                </el-menu-item>
              </el-submenu>

              <!-- 设计方案 -->
              <el-submenu index="design-scheme">
                <template slot="title">
                  <i class="el-icon-folder"></i>
                  <span>设计方案</span>
                </template>
                <el-menu-item index="/design-sponsor">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>我的发起</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/design-my-to-do">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>我的待办</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/design-process-status">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>流程进度</span>
                  </template>
                </el-menu-item>
              </el-submenu>

              <!-- 招投标流程 -->
              <el-submenu index="bidding-scheme">
                <template slot="title">
                  <i class="el-icon-folder"></i>
                  <span>招投标流程</span>
                </template>
                <el-menu-item index="/bidding-sponsor">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>我的发起</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/bidding-my-to-do">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>我的待办</span>
                  </template>
                </el-menu-item>
                <el-menu-item index="/bidding-process-status">
                  <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span>流程进度</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </el-submenu>

            <!-- 单位管理 -->
            <el-submenu index="personner" v-if="isShow(['admin'])">
              <template slot="title">
                <i class="el-icon-s-custom"></i>
                <span>单位管理</span>
              </template>
              <el-menu-item index="/people">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>人员管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/job">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>职位管理</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/system-node-table">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>系统节点表</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-submenu index="process-config" v-if="isShow(['admin'])">
              <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span>流程信息配置</span>
              </template>
              <el-menu-item index="/process-config/projectType">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>项目类型配置</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="/notice/list" v-if="isShow(['admin'])">
              <i class="el-icon-message-solid"></i>
              <span slot="title">通知管理</span>
            </el-menu-item>
            <el-menu-item index="/notice-user/list" v-if="isShow(['user'])">
              <i class="el-icon-message-solid"></i>
              <span slot="title">通知公告</span>
            </el-menu-item>
            <el-submenu index="user-center">
              <template slot="title">
                <i class="el-icon-user"></i>
                <span>个人中心</span>
              </template>
              <el-menu-item index="/user-center/info">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>个人基本信息</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/user-center/password">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>修改密码</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <!-- 测试 -->
            <!-- <el-submenu index="z-test">
              <template slot="title">
                <i class="el-icon-link"></i>
                <span>测试</span>
              </template>
              <el-menu-item index="/z-test/one">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>测试1</span>
                </template>
              </el-menu-item>
              <el-menu-item index="/z-test/two">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span>测试2</span>
                </template>
              </el-menu-item>
            </el-submenu> -->
          </el-menu>
        </el-aside>
        <!--主要区域容器-->
        <el-main class="containerBox">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { logout } from '@/api/api'
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['name', 'jobAccount', 'role', 'username'])
  },
  data () {
    return {
      activePath: '/Statisticspage',
      isCollapsed: false,
    }
  },
  methods: {
    tohome () {
      this.$router.replace({ path: '/homepage' })
    },
    isShow (args) {
      let canShow = false
      let userAuth = this.role || ''
      if (args && args.length > 0) {
        for (let index = 0; index < args.length; index++) {
          canShow = args[index] === userAuth
          if (canShow) break
        }
      }
      return canShow
    },
    // 用户中心
    userInfo () { },
    // 获取用户名
    toggleCollapse () {
      this.isCollapsed = !this.isCollapsed
    },
    // 退出登录
    exit: function () {
      let params = {
        userName: this.username
      }
      logout(params).then(res => {
        if (res.code == 200) {
          sessionStorage.removeItem('token')
          this.$router.replace({ path: '/' })
        } else {
          swal('错误', res.message || '网络连接异常', 'error')
        }
      }).catch((err) => {
        swal('错误', '网络连接异常', 'error')
      })
    },
  },
}
</script>

<style lang="less" scoped>
.el-header {
  // background-color: #0074f5;
  display: flex;
  justify-content: space-between;
  padding-left: 0;
  align-items: center;
  color: #f6f7fb;
  font-size: 38px;
  position: relative;
  > div {
    display: flex;
    align-items: center;
    img {
      cursor: pointer;
    }
  }
}
.weather {
  position: absolute;
  right: 150px;
  img {
    width: 25px;
    height: 25px;
    margin-left: 30px;
  }
}
.tem {
  font-size: 32px;
}
.ee {
  font-size: 20px;
  margin-top: 22px;
  margin-left: 20px;
  cursor: pointer;
}
.adr {
  margin-top: 10px;
}
.user {
  position: absolute;
  right: 20px;
}
.el-aside {
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
  bottom: 0;
  // background-color: #0074f5;
  ul.el-menu {
    border-right: 0;
  }
}
.el-main {
  background-color: #ffffff;
  position: absolute;
  left: 220px;
  right: 0;
  top: 60px;
  // min-width: 980px;
  bottom: 0;
  // overflow-y: scroll;
}
.toggle-button {
  background-color: #66b1ff;
  font-size: 15px;
  line-height: 24px;
  color: #fff;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}
.containerBox {
  background: rgba(236, 240, 245);
  // height: 93vh;
}
</style>